//window.location.hash  # profile 个人设置
// 个人信息 profile  tab的内容
import { DatePicker, Form, FormItem, Input, InputNumber, RadioGroup } from '@kedacom/react-next'
import { forwardRef } from 'react'
import { ProfileViewProps } from '../interface'
import { StyledProfile } from '../style'
import useProfileHook from '../servers/profileServer'
import dayjs from 'dayjs'
import Prompt from '@/components/Prompt'
import { checkIsLeave } from '@/components/Prompt/contentChange'
const ProfileView = (props: ProfileViewProps, ref: any) => {
	const { INPUT_WIDTH, oldData, onInputChange, sexData, formData, ..._useHook } = useProfileHook(props, ref)
	return (
		<StyledProfile className="profile-wrap">
			<Prompt
				when={true}
				message={() => {
					return checkIsLeave({
						/**原数据 */
						oldData,
						/**离开时数据 */
						newData: formData,
						msg: '内容已修改，是否保存？',
						okText: '保存',
						onOk: _useHook.toSave,
						saveBtnIsLeave: false,
					})
				}}
			/>
			<Form className="form">
				<FormItem title="账号">
					<span>{formData.account}</span>
				</FormItem>
				<FormItem title="姓名">
					<Input
						width={INPUT_WIDTH}
						value={formData.name}
						placeholder={'请输入姓名'}
						maxLength={21}
						onChange={(e, v) => {
							onInputChange(v, 'name')
						}}
					/>
				</FormItem>
				<FormItem title="电子邮箱">
					<Input
						width={INPUT_WIDTH}
						maxLength={64}
						value={formData.email}
						placeholder={'请输入电子邮箱'}
						onChange={(e, v) => {
							onInputChange(v, 'email')
						}}
					/>
				</FormItem>
				<FormItem title="手机">
					<InputNumber
						width={INPUT_WIDTH}
						value={formData.mobile}
						maxLength={11}
						placeholder={'请输入手机'}
						onChange={(e, v) => {
							onInputChange(v, 'mobile')
						}}
					/>
				</FormItem>
				<FormItem title="座机">
					<InputNumber
						width={80}
						value={formData.extNum1}
						placeholder={'区号'}
						maxLength={4}
						onChange={(e, v) => {
							onInputChange(v, 'extNum1')
						}}
					/>
					<span className="line">-</span>
					<InputNumber
						width={_useHook.EXT_NUM_WIDTD}
						value={formData.extNum2}
						placeholder={'电话'}
						maxLength={15}
						onChange={(e, v) => {
							onInputChange(v, 'extNum2')
						}}
					/>
					<span className="line">-</span>
					<InputNumber
						width={86}
						value={formData.extNum3}
						placeholder={'分机'}
						maxLength={9}
						onChange={(e, v) => {
							onInputChange(v, 'extNum3')
						}}
					/>
				</FormItem>
				<FormItem title="性别">
					<RadioGroup
						value={formData.sex}
						options={sexData}
						labelField={'text'}
						onChange={(e, value) => {
							onInputChange(value || '0', 'sex')
						}}
					/>
				</FormItem>
				<FormItem title="出生日期">
					<DatePicker
						inputWidth={300}
						maxDate={dayjs()}
						onChange={_useHook.onBirthChange}
						value={formData.dateOfBirth ? dayjs(formData.dateOfBirth) : null}
					/>
				</FormItem>
				<FormItem title="传真">
					<Input
						width={INPUT_WIDTH}
						value={formData.fax}
						placeholder={'请输入传真'}
						maxLength={32}
						onChange={(e, v) => {
							onInputChange(v, 'fax')
						}}
					/>
				</FormItem>
				<FormItem title="办公位置">
					<Input
						width={INPUT_WIDTH}
						value={formData.seat}
						maxLength={60}
						placeholder={'请输入办公位置'}
						onChange={(e, v) => {
							onInputChange(v, 'seat')
						}}
					/>
				</FormItem>
				<FormItem title="职位">
					<span>{formData.deptPositions}</span>
				</FormItem>
			</Form>
		</StyledProfile>
	)
}

export default forwardRef(ProfileView)
